<template>
	<u-tabbar
	:value='index' 
	@change="name => index = name"
	activeColor="#c2503a"
	inactiveColor="#dfe6e9">
		<u-tabbar-item 
		v-for="item in navBar" 
		:key="item.name" 
		:text="item.text" 
		:icon="item.icon" 
		:name="item.name"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default{
		name: "TabBar",
		data() {
			return {
				index: "index1",
				navBar: [
					{text: "首页",icon: "grid",name: "index1"},
					{text: "消息",icon: "chat",name: "index2"},
					{text: "公益招聘",icon: "/static/logo.png",name: "index3"},
					{text: "主页",icon: "home",name: "index4"},
					{text: "我的",icon: "setting",name: "index5"}
				]
			}
		},
	}
</script>

<style>
	::v-deep .u-tabbar__content{
	    background-color: #1b435f;
	}
</style>